<template>
  <div class="dashboard-container">
    <div class="app-container">
      <head-tool>
        <template slot="after">
          <el-button type="primary" size="small" @click="showAddDialog('0', 1)">
            <i class="el-icon-plus"></i>
            添加权限
          </el-button>
        </template>
      </head-tool>
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="名称" width="180" align="center">
        </el-table-column>
        <el-table-column prop="code" label="标识" width="180" align="center">
        </el-table-column>
        <el-table-column prop="description" label="描述" align="center">
        </el-table-column>
        <el-table-column prop="description" label="操作" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              size="small"
              @click="showAddDialog(row.id, 2)"
              v-if="row.type == 1"
            >
              添加
            </el-button>
            <el-button type="warning" size="small" @click="doEdit(row.id)">
              编辑
            </el-button>
            <el-button type="danger" size="small" @click="doDel(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        style="width: 70%; margin: auto"
        @close="cancel"
      >
        <el-form
          :model="formData"
          ref="perForm"
          :rule="rules"
          label-width="80px"
        >
          <el-form-item prop="name" label="权限名称:">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item prop="code" label="权限标识:">
            <el-input v-model="formData.code"></el-input>
          </el-form-item>
          <el-form-item prop="description" label="权限描述:">
            <el-input v-model="formData.description"></el-input>
          </el-form-item>
          <el-form-item label="开启:">
            <el-switch
              v-model="formData.enVisible"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="save"> 确 定 </el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getPermissionList,
  getPermissionById,
  updatePermission,
  addPermission,
  delPermissionById,
} from "@/api/permisssion";
import { getTree } from "@/utils/index";
export default {
  name: "permission",
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      formData: {},
      rules: {},
    };
  },
  created() {
    this.getPermissionList();
  },
  methods: {
    async getPermissionList() {
      let res = await getPermissionList();
      // console.log(res);
      this.tableData = getTree(res.data, "0");
    },
    // 显示对话窗的方法
    showAddDialog(pid, type) {
      this.formData.pid = pid;
      this.formData.type = type;
      this.dialogVisible = true;
    },
    // 编辑权限点
    async doEdit(id) {
      let res = await getPermissionById(id);
      this.formData = res.data;
      this.dialogVisible = true;
    },
    // 删除权限
    async doDel(id) {
      await delPermissionById(id);
      this.$message.success("删除成功!");
      this.getPermissionList();
    },
    // 点击确认保存数据
    async save() {
      if (this.formData.id) {
        // 编辑项目
        await updatePermission(this.formData);
      } else {
        // 新增项目
        await addPermission(this.formData);
      }
      // console.log(res);
      this.$message.success(this.title + "成功!");
      // 关闭对话窗口
      this.dialogVisible = false;
      // 刷新整个页面
      this.getPermissionList();
    },
    cancel() {
      this.formData = {};
      this.dialogVisible = false;
    },
  },
  computed: {
    title() {
      return this.formData.id ? "编辑权限点" : "新增权限点";
    },
  },
};
</script>

<style>
</style>